<template>
<div>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="账户基本信息维护" name="first"></el-tab-pane>
    <el-tab-pane label="密码修改" name="second"></el-tab-pane>
  </el-tabs>
  <div class="form-center">
    <el-form ref="form" :model="form" label-width="120px" size="small" v-if="activeName=='first'">
      <el-form-item label="账号：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="用户类别：">
        <el-radio-group v-model="form.resource">
          <el-radio label="个人用户">个人用户</el-radio>
          <el-radio label="企业用户">企业用户</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系人：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="备用联系人：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="备用联系电话：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="发票抬头：">
        <el-input v-model="form.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="详细地址：">

          <el-select v-model="prov" :style="{width:formSelectWidth}">
            <el-option v-for="(option,index) in arr" :value="option.name" :key="index">
              {{ option.name }}
            </el-option>
          </el-select>
          <el-select v-model="city" :style="{width:formSelectWidth}">
            <el-option v-for="(option,index) in cityArr" :value="option.name" :key="index">
              {{ option.name }}
            </el-option>
          </el-select>
          <el-select v-model="district" v-if="district" :style="{width:formSelectWidth}">
            <el-option v-for="(option,index) in districtArr" :value="option.name" :key="index">
              {{ option.name }}
            </el-option>
          </el-select>
          <el-input v-model="form.name" :style="{width:'250px'}"></el-input>
      </el-form-item>
      <el-form-item label="用户类别：">
        <el-radio-group v-model="form.resource">
          <el-radio label="允许"></el-radio>
          <el-radio label="拒绝"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="btn-rignt">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="password" label-width="120px" size="small" v-else>
      <el-form-item label="原密码：">
        <el-input v-model="password.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="新密码：">
        <el-input v-model="password.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：">
        <el-input v-model="password.name" :style="{width:formInputWidth}"></el-input>
      </el-form-item>
      <el-form-item class="btn-rignt">
        <el-button type="primary" @click="psdSubmit">确定</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="提示"
      :visible.sync="DialogVisible"
      width="30%"
      center>
      <span>成功保存！</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="DialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
  import area from '../../../static/js/area.js'
    export default {
        name: "AccountSettings",
      data() {
        return {
          arr: area.arrAll,
          prov: '省份',
          city: '城市',
          district: '区域',
          cityArr: [],
          districtArr: [],
          activeName: 'first',
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          password:{

          },
          formInputWidth:'400px',
          formSelectWidth:'120px',
          DialogVisible:false,
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        onSubmit() {
          this.DialogVisible=true
          console.log('submit!');
        },
        psdSubmit(){
          this.DialogVisible=true
        },
        updateCity: function() {
          for (var i in this.arr) {
            var obj = this.arr[i];
            if (obj.name) {
              if (obj.name == this.prov) {
                this.cityArr = obj.sub;
                break;
              }
            }
          }
          this.city = this.cityArr[1].name;
        },
        updateDistrict: function() {
          for (var i in this.cityArr) {
            var obj = this.cityArr[i];
            if (obj.name == this.city) {
              this.districtArr = obj.sub;
              break;
            }
          }
          if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
            this.district = this.districtArr[1].name;
          } else {
            this.district = '';
          }
        }
      },
      beforeMount() {
        this.updateCity();
        this.updateDistrict();

      },
      watch: {
        prov: function() {
          this.updateCity();
          this.updateDistrict();
        },
        city: function() {
          this.updateDistrict();
        }
      }
    }
</script>

<style scoped>
.form-center{
  padding: 30px;
}
  .btn-rignt{
    text-align: right;
  }
</style>
